<template>
    <div class="Echarts">
        <!-- 柱状图 -->
        <div ref="histogram" class="histogram"></div>
    </div>
</template>

<script setup>
import * as echarts from "echarts";                     // 导入echarts绘图
// import AutoUpdateStore from "@/stores/AutoUpdateStore"; // 导入工单信息
// import { Info } from "@/api/AutoUpdate";                // 数据接口

// // 获取数据
onMounted(async () => {
    // await Info();
    histogramChart();
});

// const store = AutoUpdateStore();
const histogram = ref(null);
// // 自动更新月份
// const date = new Date();
// const datereg = /^(\d{4}-\d{2})/;  // 只展示年份和月份
// const now = datereg.exec(date.toISOString()); // 当前年月
// // 赋值渲染
// const info = computed(() => store.info);

// 绘制柱状图
const histogramChart = () => {
    let myChart = echarts.init(histogram.value);
    let option = {
        title: [
            {
                left: "center",
                text: `每月注册人数`,
            },
        ],
        xAxis: {
            data: ["1月","2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        },
        yAxis: {},
        series: [
            {
                type: "bar",
                data: [1231, 41432, 342, 1314, 1414, 5151, 1414, 4637, 5858, 4758, 24242, 24255],
                barWidth: "80%",
            },
        ],
        tooltip: {
            trigger: "axis",
        },
        grid: [
            {
                top: "10%",
                left: "15%",
                bottom: "5%",
                right: "5%",
            },
        ],
        markPoint: {
            data: [
                { tyep: "max", name: "Max" },
                { type: "min", name: "Min" },
            ],
        },
    };
    myChart.setOption(option);
};
</script>

<style scoped>
.histogram {
    width: 600px;
    height: 400px;
    margin: 20px auto;
}
</style>